<template>
	<div>
<el-row >
		
		</el-row>

		<el-row >
			<el-col :span="1" class='labelCol'>
				<p class="labelText">查询类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="condition.select.key" placeholder="请选择类型" clearable>
					<el-option label="车牌号" value="1"></el-option>
					<el-option label="VIN" value="2"></el-option>
					<el-option label="联系人姓名" value="3"></el-option>
					<el-option label="联系人电话" value="4"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">查询内容:</p>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="请输入查询内容" style="width:95%;" v-model="condition.select.value" size="small">
				</el-input>
			</el-col>
				
			<el-col :span="4" >
				<el-button type="primary" size="small" v-on:click='exInsuranceQuery'>查询</el-button>
			</el-col>
			</el-row>
		<el-row >
			<el-col :span="1" class='labelCol'>
				<p class="labelText">保险状态:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="condition.status" placeholder="请选择状态" clearable>
					<el-option v-for="item in statusComboData" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">保险类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;margin-left:0px;" v-model="condition.type" placeholder="请选择类型" clearable>
					<el-option v-for="item in typeCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">开始日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" style="width: 95%;" v-model="condition.time.startTime" format="yyyy-MM-dd" :editable=false type="date" placeholder="起始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">结束日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" style="width: 95%;" v-model="condition.time.stopTime" format="yyyy-MM-dd" :editable=false type="date" placeholder="结束日期">
				</el-date-picker>
			</el-col>
		</el-row>
		<el-row>
		
			<el-col :span="1" class='labelCol'>
				<p class="labelText">门店:</p>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="门店" style="width:95%;" v-model="condition.storeName" size="small">
				</el-input>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="区域" style="width:95%;" v-model="condition.storeArea" size="small">
				</el-input>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">渠道:</p>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="渠道" style="width:95%;" v-model="condition.storeChanel" size="small">
				</el-input>
			</el-col>
		</el-row>
		
		<el-row :gutter="24">
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border style="width: 100%;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
					<!--
																																																																																														                                                            	作者：1813180149@qq.com
																																																																																														                                                            	时间：2017-02-20
																																																																																														                                                            	描述：延保
																																																																																														                                                            	-->
					<el-table-column prop="vin" label="VIN" width="180" fixed>
					</el-table-column>
					<el-table-column prop="plateNum" label="车牌号" width="110" fixed>
					</el-table-column>
					<el-table-column prop="userName" label="被保险人" width="110">
					</el-table-column>
					<el-table-column prop="userTel" label="联系方式" width="110">
					</el-table-column>
					<el-table-column prop="contractstartinsurance" label="交强险开始日期" :formatter="startFormat" width="120" fixed align="center">
					</el-table-column>
					<el-table-column prop="compulsoryStartDate" label="商业险开始日期" :formatter="stopFormat" width="120" fixed align="center">
					</el-table-column>
					<el-table-column prop="carSeries" label="车系" width="200">
					</el-table-column>
					<el-table-column prop="baseType" label="续保类型" width="100">
					</el-table-column>
					<el-table-column prop="huahen" label="划痕险" :formatter="huahenCov" width="90">
					</el-table-column>
					<el-table-column prop="boli" label="玻璃险" :formatter="boliCov" width="80">
					</el-table-column>
						<el-table-column prop="storeName" label="门店"  width="80">
					</el-table-column>
						<el-table-column prop="storeArea" label="区域"  width="80">
					</el-table-column>
						<el-table-column prop="storeChanel" label="渠道"  width="80">
					</el-table-column>
					</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				/*********车辆分页*********/
				vinCurPage: 1,
				//车牌号
				plateNum: '',
				//车龄
				carAge: '',
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//查询条件
				//查询条件车系
				seriesComboData: [],
				//分组数据
				tableData: {
					total: 0,
					dataList: []
				},
				//vin数据
				vinData: {
					total: 0,
					dataList: []
				},
				//类型下拉数据
				reTimeCombo: [{
					label: '一年',
					value: '1'
				}, {
					label: '两年',
					value: '2'
				}, {
					label: '三年',
					value: '3'
				}, {
					label: '四年',
					value: '4'
				}],
				//续保类型  新保 新保续 续保续 转保续
				typeCombo: [{
					label: '新保',
					value: '1'
				}, {
					label: '新保续',
					value: '2'
				}, {
					label: '续保续',
					value: '3'
				}, {
					label: '转保续',
					value: '4'
				}, {
					label: '非品牌',
					value: '5'
				}],
				//车龄
				carAgeCombo: [{
					label: '一年',
					value: '1'
				}, {
					label: '两年',
					value: '2'
				}, {
					label: '三年',
					value: '3'
				}, {
					label: '四年',
					value: '4'
				}, {
					label: '五年',
					value: '5'
				}, {
					label: '六年',
					value: '6'
				}, {
					label: '七年',
					value: '7'
				}, {
					label: '八年',
					value: '8'
				}, {
					label: '八年以上',
					value: '9'
				}],
				//状态
				statusComboData: [{
					label: '未过期',
					value: '4'
				}, {
					label: '一月内到期',
					value: '1'
				}, {
					label: '两月内到期',
					value: '2'
				}, {
					label: '三月内到期',
					value: '3'
				}, {
					label: '已过期',
					value: '5'
				}],
				//查询条件的对象
				condition: {
					storeArea: '',
					storeName: '',
					storeChanel: '',
					select: {
						key: "1",
						value: "",
					},
					series: [],
					carAge: [],
					status: "",
					type: "",
					time: {
						startTime: "",
						stopTime: ""
					}
				},
				//续保类型
				typeConvertData: {},
				//userTel
				userTel: "",
				//vin查询条件
				vinPar: '',
				//短信名称转换值
				msgTypeConvertData: {},
				//显示选择车辆的界面
				carVinShow: false,
				//新增界面显示
				FormDataShow: false,
				//创建编辑表单
				exFormShow: false,
				//短信名称是否可编辑
				msgNameEdit: false,
				//业务系统字典
				moduleCombo: [],
				//表单初始值
				emptyData: {
					id: '',
					vin: '',
					userTel: '',
					plateNum: '',
					userName: '',
					compulsoryinsurancenum: '',
					commercialinsurancenum: '',
					contractstartinsurance: '',
					contractstopinsurance: '',
					iscCompulsoryInsurance: '',
					type: '',
					baseType: '',
					boli: '',
					huahen: '',
					carAge: '',
					carSeries: '',
					//					reTime: '',
					//					contractstartinsurance: '',
					//					contractstopinsurance: '',
					//					startLegend: '',
					//					stopLegend: '',
					//status: '1',
					createTime: 0,
					createUser: '',
					updateTime: 0,
					updateUser: '',
				},
				//表单数据
				FormData: {
					id: '',
					vin: '',
					userTel: '',
					plateNum: '',
					userName: '',
					compulsoryinsurancenum: '',
					commercialinsurancenum: '',
					contractstartinsurance: '',
					contractstopinsurance: '',
					iscCompulsoryInsurance: '',
					type: '',
					baseType: '',
					boli: '',
					huahen: '',
					carAge: '',
					carSeries: '',

					createTime: 0,
					createUser: '',
					updateTime: 0,
					updateUser: '',
				},
				//校验规则
				insRule: {
					vin: [{
						required: true,
						message: '请选择VIN',
						trigger: 'blur'
					}],
					boli: [{
						required: true,
						message: '请选择玻璃险',
						trigger: 'blur'
					}],
					huahen: [{
						required: true,
						message: '请选择划痕险',
						trigger: 'blur'
					}],
					contractstartinsurance: [{
						required: true,
						type: 'date',
						message: '请选择合同开始时间',
						trigger: 'change'
					}],
					contractstopinsurance: [{
						required: true,
						type: 'date',
						message: '请选择合同结束时间',
						trigger: 'change'
					}]
				},
				multipleSelection: [],
				id: '',

			}
		},

		methods: {
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				if(this.$data.multipleSelection.length > 1)
					this.$message.error("请选择一条数据！");
			},

		
			//查询
			exInsuranceQuery: function() {
				if(this.$data.condition.time.startTime) {
					this.$data.condition.time.startTime = this.moment(this.$data.condition.time.startTime).format('YYYY-MM-DD');
				}
				if(this.$data.condition.time.stopTime) {
					this.$data.condition.time.stopTime = this.moment(this.$data.condition.time.stopTime).format('YYYY-MM-DD');
				}
			
					this.$data.condition.area = this.$data.area;
					this.$data.condition.brand = this.$data.brand;
					this.$data.condition.companyId = this.$data.companyId;
					this.$http.post(this.API_ROOT + '/crm/insurance/page', this.$data.condition, {
							params: {
								start: this.$data.CurentPage,
								limit: this.page.pageSize
							}
						})
						.then(resp => {
							if(resp.data.success) {

								//this.$message(resp.data.msg);
								resp.data.total = parseInt(resp.data.total);
								// es5写法
								this.$data.tableData = resp.data;
								//this.exInsuranceQuery(this.$data.curTreeDeptId);
								//this.$data.exFormShow = false;
							} else {

								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				

			},
			
			
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.exInsuranceQuery();
			},
			
			//时间回调函数
			changetime: function(datess) {
				if(datess != null && datess != undefined && datess != '') {
					this.$data.FormData.contractstopinsurance = new Date(this.moment(datess).add(1, "years").add(-1, "days").format("YYYY-MM-DD"));
					//date.setDate(date.getDate() + number)
				} else {
					this.$data.FormData.contractstopinsurance = '';

				}
				debugger;
			},
			//状态转换 划痕险
			huahenCov: function(row, column) {
				if(row.huahen == null || row.huahen == 0 || row.huahen == '') {
					return "未购买";
				} else {
					return "购买"
				}

			},
			//状态转换 玻璃险
			boliCov: function(row, column) {
				if(row.boli == null || row.boli == 0 || row.boli == '') {
					return "未购买";
				} else {
					return "购买"
				}
			},
			//组织机构转换
			typeCov: function(row, column) {
				return this.$data.typeConvertData[row.type];
			},
			queryDeptCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "insuranceType"
					}
				}).then((response) => {
					this.$data.typeConvertData = response.data;
				}, (response) => {});
			},
			msgTypeDeptCovert: function() {

				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "insuranceType"
					}
				}).then((response) => {

					this.$data.msgTypeConvertData = response.data;

				}, (response) => {});
			},
			startFormat: function(row) {
				if(row.contractstartinsurance) {
					return this.moment(row.contractstartinsurance).format("YYYY-MM-DD");
				}
			},
			stopFormat: function(row) {
				if(row.compulsoryStartDate) {
					return this.moment(row.compulsoryStartDate).format("YYYY-MM-DD");
				}
			},
			/****************
			VIN ***************/
			vinChange: function(page) {
				this.$data.vinCurPage = page;
				this.vinQuery();
			},
			
			
		
			
		
			
		},
		//表单创建时执行
		created: function() {
		
		
		}
	}
</script>
<style>

</style>